<template>
  <div class="blogsbox">
    <div class="blogs" v-for="item in newBlogDate" :key="item.uid">
      <h3 class="blogtitle">
        <a href="javascript:void(0);" @click="to(item.uid)">{{item.title}}</a>
      </h3>
      <span class="blogpic">
        <a href="javascript:void(0);">
          <img :src="item.photoList[0]" />
        </a>
      </span>
      <p class="blogtext">{{item.summary}}</p>
      <div class="bloginfo">
        <ul>
          <li class="author">
            <i class="el-icon-s-custom"></i>
            <a href="javascript:void(0);">{{item.author}}</a>
          </li>
          <li class="lmname" v-if="item.blogSort">
            <i class="el-icon-menu"></i>
            <a href="javascript:void(0);">{{item.blogSort.blorSortName}}</a>
          </li>
          <li class="view">
            <i class="el-icon-view"></i>
            <span>{{item.clickCount}}</span>
          </li>
          <li class="like">
            <i class="el-icon-star-on"></i>
            {{item.collectCount}}
          </li>
          <li class="createTime">
            <i class="el-icon-date"></i>
            {{item.createTime}}
          </li>
        </ul>
      </div>
    </div>
    <el-pagination
      style="float:right;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="7"
      layout="total, prev, pager, next"
      :total="handlePageLength()"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      newBlogDate: [
      ],

    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handlePageLength(){
      return this.newBlogDate.length
    },
    to(blogUid) {
      let routeData = this.$router.resolve({
        path: "/info",
        query: { blogUid }
      });
      window.open(routeData.href, "_blank");
    }
  },
  mounted() {
    let session = window.localStorage;
    let blogs = JSON.parse(session.getItem("blogs"));
    this.newBlogDate = blogs == null ? this.newBlogDate : blogs;
    this.newBlogDate = this.newBlogDate.reverse();
  }
};
</script>

<style>
.blogs {
  overflow: hidden;
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, 0.1);
  transition: all 0.6s ease;
}
.blogs .blogtitle {
  margin: 0 0 10px;
  font-size: 20px;
  overflow: hidden;
}

.blogs .blogpic img {
  width: 100%;
  height: auto;
  transition: all 0.6s ease;
  margin-bottom: 10px;
}
.blogs .blogtext {
  font-size: 14px;
  color: #566573;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  margin-top: 20px;
}
.bloginfo {
  overflow: hidden;
  margin-top: 30px;
}
.bloginfo ul li {
  float: left;
  font-size: 12px;
  padding: 0 0 0 20px;
  color: #748594;
  line-height: 1.5;
  display: inline-block;
}
.bloginfo ul li a:hover {
  color: #000;
}
.bloginfo ul li a {
  color: #748594;
}
.iconfont {
  font-family: inonfont !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}
.iconfont {
  margin-right: 3px;
}
.bloginfo ui li a {
  color: #748594;
}
</style>